<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Wap 电商平台</title>
		<meta charset="UTF-8">
		<script th:replace="common/head::static"></script>
	</head>
</html>
<body>
	<div id="app" style="">
		<nut-navbar back-show="false" :more-show="true" class="demo-nav" title="个人中心">
			<template slot="back-icon">
				<span>&nbsp;</span>
			</template>
			<template slot="more-icon">
				<span>&nbsp;</span>
			</template>
		</nut-navbar>
		<div style="text-align:center;margin:20px 0px;">
			<nut-avatar style="width:200px;height:200px;flex:1;" bg-image="https://nutui.jd.com/3x/img/cell-avatar.jpeg"></nut-avatar>
		</div>
		<div class="cell-box">
		  <nut-cell :is-link="true"  :show-icon="true" title="我的主页" @click-cell="clickEvnt">
		    <template slot="avatar">
		    	<i class="nut-icon nut-icon-self" style="height: 18px; width: 18px;margin-right:13px;color:#9D49F8FF">
					<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
					<path d="M11.9,3c3.9,0,4.8,3.2,4.8,5.2v1.3l0,0c0,1.4-0.8,3.5-2.4,4.5l-0.2,0.1c3.2,0.9,5.6,3.6,5.6,6.8V21L4.1,21v-0.1
						c0-3.2,2.4-6,5.6-6.8L9.6,14C8,12.9,7.2,10.9,7.2,9.5V8.2l0,0C7.1,6.2,8,3,11.9,3z"></path>
					</svg>
		    	</i>
		    </template>
		  </nut-cell>
		  <nut-cell :is-link="true" :show-icon="true" title="收货地址" desc="管理地址" @click-cell="clickEvnt">
		      <template slot="avatar">
		    	<i class="nut-icon nut-icon-self" style="height: 18px; width: 18px;margin-right:13px;color:#FF6E4CFF">
					<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
					<path id="path-1_1_" d="M12.5,1.3c5.1,0,9.3,4.2,9.3,9.3c0,2.4-0.9,4.6-2.5,6.3L19,17.2l-4.9,5.1
	c-0.8,0.8-2.1,0.9-3,0.1l-5.1-5c-1.8-1.7-2.9-4.1-2.9-6.7C3.2,5.5,7.3,1.3,12.5,1.3z M12.5,7c-2,0-3.6,1.6-3.6,3.6s1.6,3.6,3.6,3.6
	s3.6-1.6,3.6-3.6S14.5,7,12.5,7z"></path>
					</svg>
		    	</i>
		    </template>
		  </nut-cell>
		  <nut-cell :is-link="true" :show-icon="true" title="我的收藏" @click-cell="clickEvnt">
		    <template slot="avatar">
		    	<i class="nut-icon nut-icon-self" style="height: 18px; width: 18px;margin-right:13px;color:#FFBA12FF">
					<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
					<path d="M17.3,22.4c0.7,0.4,1.6,0.1,2-0.6c0.2-0.3,0.2-0.6,0.1-0.9l-1-5.7l4.2-4c0.6-0.6,0.6-1.5,0-2.1
	c-0.2-0.2-0.5-0.4-0.9-0.4L16,7.6l-2.6-5.2c-0.4-0.7-1.3-1-2-0.7c-0.3,0.1-0.5,0.4-0.7,0.7L8.2,7.6L2.4,8.5C1.5,8.6,1,9.3,1.1,10.2
	c0,0.3,0.2,0.6,0.4,0.9l4.2,4l-1,5.7c-0.1,0.8,0.4,1.6,1.2,1.7c0.3,0.1,0.7,0,0.9-0.1l5.2-2.7L17.3,22.4z"></path>
					</svg>
		    	</i>
		    </template>
		  </nut-cell>
		  <nut-cell :is-link="true" :show-icon="true" title="设置"   @click-cell="clickEvnt">
		      <template slot="avatar">
			      <i class="nut-icon nut-icon-self" style="height: 18px; width: 18px;margin-right:13px;color:#1EA3FFFF">
						<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
						<path id="path-1_1_" d="M16.8,3c0.4,0,0.9,0.3,1.1,0.6l4.6,7.8c0.2,0.3,0.2,0.9,0,1.2l-4.6,7.8
		c-0.2,0.3-0.7,0.6-1.1,0.6H7.5c-0.4,0-0.9-0.3-1.1-0.6l-4.6-7.8c-0.2-0.3-0.2-0.9,0-1.2l4.6-7.8C6.6,3.3,7.1,3,7.5,3H16.8z
		 M12.2,8.2c-2.1,0-3.8,1.7-3.8,3.8s1.7,3.8,3.8,3.8S16,14.1,16,12S14.2,8.2,12.2,8.2z"></path>
						</svg>
			    	</i>
		    	</template>
		  </nut-cell>
		</div>
		
		<row padding="15px 10px 10px">
			<skeleton-square width="120px" height="120px"></skeleton-square>
			<column style="flex:1;">
				<skeleton-square 
			        width="220px" 
			        :count="2" 
			        margin="5px 10px 5px 10px"
			    ></skeleton-square>
			    <skeleton-square 
			        width="30px" 
			        margin="30px 0 0 10px"
			    ></skeleton-square>
			</column>
		</row>
		<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList" :bottom="true"> </nut-tabbar>
	</div>
	
	<script src="./js/menu.js" type="text/javascript"></script>
	<script type="text/javascript">
		tabList = menuList;
		tabList[3].curr = true;
		new Vue({
			el: '#app',
            data() {
				return {
			      	tabList: tabList
				}
			},
			created: function(){
				
			},
			methods: {
				tabSwitch1: function(value, index) {
					var path = "";
					switch(index) {
						case 0:
							path = "/index"
							break;
						case 1:
							path = "/goods"
							break;
						case 2:
							path = "/order"
							break;
						case 3:
							path = "/my"
							break;
					}
					location.href = path;
				},
				clickEvnt: function(){
					
				}
			}
		});
	</script>
</body>